<template>
<div class="block" style="display:inline-block;">
    <div style="display:inline-block;" v-if="headerConfig.timeSpace">
        <span class="demonstration">查询时间: &nbsp;</span>
        <el-date-picker size="small" v-model="headerData.TimeSpace" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :picker-options="headerData.pickerOptions">
        </el-date-picker>
        <span  class="demonstration">对比时间: &nbsp;</span>
        <el-date-picker style="margin-top:10px;" size="small" v-model="headerData.compTimeSpace" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :picker-options="headerData.pickerOptions">
        </el-date-picker>
    </div>
    <div style="display:inline-block;" v-if="headerConfig.timePoint">
        <span class="demonstration">查询时间: &nbsp;</span>
        <el-date-picker v-model="headerData.searchTime  " default-value type="date" size="small" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="开始日期">
        </el-date-picker>
        <span class="demonstration">对比时间: &nbsp;</span>
        <el-date-picker v-model="headerData.compTime" default-value type="date" size="small" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="对比时间">
        </el-date-picker>
    </div>
    <el-select v-if="headerConfig.dataType" @change="setTableName" v-model="headerData.dataType" size="small" filterable clearable placeholder="数据类型选择">
        <el-option v-for="item in headerData.dataTypeOptions" :key="item.dataType" :label="item.typeName" :value="item.dataType">
        </el-option>
    </el-select>

    <el-select v-if="headerConfig.dataTypeBrowser" @change="setTableNameBrowser" v-model="headerData.dataType" size="small" filterable clearable placeholder="数据类型选择">
        <el-option v-for="item in headerData.dataTypeBrowserOptions" :key="item.dataType" :label="item.typeName" :value="item.dataType">
        </el-option>
    </el-select>

    <el-select v-if="headerConfig.dataTypesoft" style="margin-top:10px;" @change="setTableNamesoft" v-model="headerData.dataType" size="small" filterable clearable placeholder="数据类型选择">
        <el-option v-for="item in headerData.dataTypesoftOptions" :key="item.dataType" :label="item.typeName" :value="item.dataType">
        </el-option>
    </el-select>

    <el-select v-if="headerConfig.softenviron" v-model="headerData.softenviron" size="small" filterable clearable placeholder="杀软环境选择">
        <el-option v-for="item in headerData.softenvironOptions" :key="item.id" :label="item.aname" :value="item.id">
        </el-option>
    </el-select>
    <el-select @change="toEmptyChannel" v-if="headerConfig.channelType" v-model="headerData.channelType" size="small" filterable clearable placeholder="渠道类型选择">
        <el-option v-for="item in headerData.channelTypeOptions" :key="item.appType" :label="item.typeName" :value="item.appType">
        </el-option>
    </el-select>
    <el-select @focus="getAppType" v-if="headerConfig.siteType" @change="Toempty" style="margin-top:10px;" v-model="headerData.siteType" size="small" filterable clearable placeholder="站点类型选择">
        <el-option v-for="item in headerData.siteTypeOptions" :key="item.appType" :label="item.typeName" :value="item.appType">
        </el-option>
    </el-select>
    <el-select v-if="headerConfig.channel" @focus="getApp" style="margin-top:10px;" v-model="headerData.channel" size="small" filterable clearable placeholder="渠道选择">
        <el-option v-for="item in headerData.ChannelOptions" :key="item.appid" :label="item.appname" :value="item.appid">
        </el-option>
    </el-select>
    <el-select v-if="headerConfig.browser" style="margin-top:10px;" v-model="headerData.browser" size="small" filterable clearable placeholder="浏览器选择">
        <el-option v-for="item in headerData.browersOptions" :key="item" :label="item" :value="item">
        </el-option>
    </el-select>
    <el-select v-if="headerConfig.area" size="small" @change="areachange" style="margin-top:10px;" v-model="headerData.area" filterable clearable placeholder="地区选择">
        <el-option v-for="item in headerData.areaOptions" :key="item" :label="item" :value="item">
        </el-option>
    </el-select>
    <el-select v-if="headerConfig.prov" size="small" style="margin-top:10px;" @focus="findProv" v-model="headerData.prov" filterable clearable placeholder="省份选择">
        <el-option v-for="item in headerData.provOptions" :key="item" :value="item">
        </el-option>
    </el-select>
    <el-select v-if="headerConfig.winnt" style="margin-top:10px;" size="small" v-model="headerData.winnt" filterable clearable placeholder="系统选择">
        <el-option v-for="item in headerData.winntOptions" :key="item.winntname" :label="item.winntname" :value="item.winntid">
        </el-option>
    </el-select>
    <el-select v-if="headerConfig.wow" style="margin-top:10px;" size="small" v-model="headerData.wow" filterable clearable placeholder="位数选择">
        <el-option v-for="item in headerData.wowOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
    <el-select v-if="headerConfig.isBar" style="margin-top:10px;" size="small" v-model="headerData.isBar" filterable placeholder="网吧量">
        <el-option v-for="item in headerData.isBarOption" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
    <el-select v-if="headerConfig.isDev" size="small" v-model="headerData.isDev" filterable placeholder="开发者环境">
        <el-option v-for="item in headerData.isDevOption" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
    <div style="margin-top:10px;">
        <span class="demonstration">统计方式: &nbsp;</span>
        <el-radio-group v-model="headerData.radio">
            <el-radio :label="1">PV</el-radio>
            <el-radio :label="2">UV</el-radio>
            <el-radio :label="3">IP</el-radio>
            <el-radio :label="4">UV+APPID</el-radio>
            <el-radio :label="5">IP+APPID</el-radio>
        </el-radio-group>
        <el-checkbox @change="getIsCloud()" v-if="headerConfig.isCloud" v-model="headerData.check">云控</el-checkbox>
        <el-button style="margin-left:15px;" type="primary" icon="el-icon-search" size="small" @click="setMsg">搜索</el-button>
        <el-button type="primary" size="small" @click="OutputExcel">导出excel</el-button>
    </div>
</div>
</template>

<script>
export default {
    data() {
        let showDate = new Date();
        let seperator = '-';
        let year = showDate.getFullYear();
        let month = showDate.getMonth() + 1;
        let day = showDate.getDate();
        var strDate = showDate.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        let currentdate = year + seperator + month + seperator + strDate;
        return {
            siteTypeURL: '' + this.$store.state.domain + '/bzDCP/pageRender/all/appType', // 站点类型类型
            channelURL: '' + this.$store.state.domain + '/bzDCP/pageRender/all/app', // 按渠道统计
            getBrowerURL: '' + this.$store.state.domain + '/bzDCP/pageRender/all/browser', //按浏览器统计
            getSystemURL: '' + this.$store.state.domain + '/bzDCP/pageRender/all/winnt', // 按系统统计
            getAntiVirusURL: '' + this.$store.state.domain + '/bzDCP/pageRender/all/antiVirus', // 按杀软环境统计
            gerAppDataURL: '' + this.$store.state.domain + '/bzDCP/pageRender/getApp',
            getAreaURL: '' + this.$store.state.domain + '/bzDCP/pageRender/all/area',
            getProvinceURL: '' + this.$store.state.domain + '/bzDCP/pageRender/getProvince',
            getAppTypeURL: '' + this.$store.state.domain + '/bzDCP/pageRender/getAppType',
            headerData: {
                TimeSpace: [currentdate, currentdate], //查询时间
                compTimeSpace: [],
                searchTime: currentdate,
                radio: 1,
                check: true,
                pickerOptions: { //日期选择
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                // 浏览器选择数据类型选择
                dataTypeBrowserOptions: [],
                dataType: '',
                //数据类型选择
                dataTypeOptions: [],
                dataType: '',
                //站点类型选择
                siteTypeOptions: [],
                siteType: '',
                //渠道类型选择
                channelTypeOptions: [],
                channelType: '',
                //渠道选择
                ChannelOptions: [],
                channel: '',
                //浏览器选择
                browersOptions: [],
                browser: '',
                // 地区选择
                areaOptions: [],
                area: '',
                //省份选择
                provOptions: [],
                prov: '',
                //位数选择
                wowOptions: [{
                    value: '32'
                }, {
                    value: '64'
                }, {
                    label: '其他',
                    value: '2'
                }],
                wow: '',
                //系统选择
                winntOptions: [],
                winnt: '',
                //杀软环境选择
                softenvironOptions: [],
                softenviron: '',
                //网吧量
                isBarOption: [{
                    value: 1,
                    label: '网吧量 — 是'
                }, {
                    value: 0,
                    label: '网吧量 — 否'
                }, {
                    value: '2',
                    label: '网吧量 — 全部'
                }],
                isBar: [],
                //开发者环境
                isDevOption: [{
                    value: 1,
                    label: '开发者环境 — 是'
                }, {
                    value: 0,
                    label: '开发者环境 — 否'
                }, {
                    value: '2',
                    label: '开发者环境 — 全部'
                }],
                isDev: [],
            }
        }
    },
    mounted() {
        let _this = this.headerData;
        this.$ajax.post(this.siteTypeURL, this.qs.stringify({}))
            .then((response) => {
                _this.dataTypeOptions = response.data.dataType;
            }).catch((err) => {
                console.log(err);
            });
        this.$ajax.post(this.channelURL, this.qs.stringify({}))
            .then((response) => {
                _this.dataTypeOptions = response.data.dataType;
                _this.ChannelOptions = response.data.app;
                _this.channelTypeOptions = response.data.channelType;
            }).catch((err) => {
                console.log(err);
            });
        this.$ajax.post(this.getBrowerURL, this.qs.stringify({}))
            .then((response) => {
                _this.dataTypeBrowserOptions = response.data.dataType;
                _this.browersOptions = response.data.browser;
            }).catch((err) => {
                console.log(err);
            });
        this.$ajax.post(this.getAreaURL, this.qs.stringify({}))
            .then((response) => {
                _this.areaOptions = response.data.area;
            }).catch((err) => {
                console.log(err);
            });
        this.$ajax.post(this.getSystemURL, this.qs.stringify({}))
            .then((response) => {
                _this.winntOptions = response.data.winnt;
            }).catch((err) => {
                console.log(err);
            });
        this.$ajax.post(this.getAntiVirusURL, this.qs.stringify({}))
            .then((response) => {
                _this.dataTypesoftOptions = response.data.dataType;
                _this.softenvironOptions = response.data.antiVirus;
            }).catch((err) => {
                console.log(err);
            });
    },
    methods: {
        toEmptyChannel() {
            this.headerData.siteType = '';
            this.headerData.channel = '';
        },
        Toempty() {
            this.headerData.channel = '';
        },
        getAppName(response) {
            this.headerData.ChannelOptions = [];
            if (response.data.app) {
                for (let i = 0; i < response.data.app.length; i++) {
                    let appname = response.data.app[i];
                    this.headerData.ChannelOptions.push(appname);
                }
            }
        },
        getApp() {
            this.$ajax.post(this.gerAppDataURL, this.qs.stringify({
                    check: this.headerData.check,
                    appType: this.headerData.siteType,
                    channelType: this.headerData.channelType
                }))
                .then(response => {
                    this.getAppName(response);
                })
        },
        getAppType() {
            this.$ajax
                .post(this.getAppTypeURL,
                    this.qs.stringify({
                        channelType: this.headerData.channelType
                    })
                )
                .then(response => {
                    this.headerData.siteTypeOptions = response.data.appType;

                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        getIsCloud() {
            this.$ajax.post(this.gerAppDataURL, this.qs.stringify({
                    check: this.headerData.check,
                    appType: this.headerData.siteType
                }))
                .then(response => {
                    this.getAppName(response);
                })
        },
        setTableName() {
            let des = this.headerData.dataTypeOptions.filter((data) => data.dataType === this.headerData.dataType)
            this.$emit('setTableName', des[0] ? des[0].typeName : '安装数');

        },
        setTableNameBrowser() {
            let desBrowser = this.headerData.dataTypeBrowserOptions.filter((data) => data.dataType === this.headerData.dataType)
            this.$emit('setTableNameBrowser', desBrowser[0] ? desBrowser[0].typeName : '展现数');
        },
        setTableNamesoft() {
            let dessoft = this.headerData.dataTypesoftOptions.filter((data) => data.dataType === this.headerData.dataType)
            this.$emit('setTableNamesoft', dessoft[0] ? dessoft[0].typeName : '展现数');
        },

        setMsg(data) {
            this.$emit('getMsg', this.headerData);
        },
        OutputExcel() {
            let baseurl = this.baseExcelURL;
            let timeSpace = this.headerData.TimeSpace ? `["${this.headerData.TimeSpace[0]}","${this.headerData.TimeSpace[1]}"]` : '';
            let ComptimeSpace = this.headerData.compTimeSpace ? `["${this.headerData.compTimeSpace[0]}","${this.headerData.compTimeSpace[1]}"]` : '';
            let Optionurl = `?timeSpace=${timeSpace}&compTimeSpace=${ComptimeSpace}&searchTime=${this.headerData.searchTime}&compTime=${this.headerData.compTime}&check=${this.headerData.check}&radio=${this.headerData.radio}&dataType=${this.headerData.dataType}&appType=${this.headerData.siteType}&appid=${this.headerData.channel}&browser=${this.headerData.browser}&area=${this.headerData.area}&prov=${this.headerData.prov}&winnt=${this.headerData.winnt}&wow=${this.headerData.wow}&antiVirus=${this.headerData.softenviron}&channelType=${this.headerData.channelType}`;
            window.open(baseurl + Optionurl)
        },
        //地区省份二级联动
        areachange() {
            if (this.headerData.prov != '')
                this.headerData.prov = '';
        },
        findProv() {
            this.$ajax
                .post(this.getProvinceURL,
                    this.qs.stringify({
                        area: this.headerData.area
                    })
                )
                .then(response => {
                    this.headerData.provOptions = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },

    },
    props: {
        headerConfig: {
            type: Object
        },
        baseExcelURL: {
            type: String
        }
    }
}
</script>
 
<style lang="scss" scoped>
.block {
    background: #fff;
    border: 1px solid #dcdfe6;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    padding: 12px;
    min-width: 1317px;
}
</style>
